<template>
  <div :style="columnStyle">
    <slot v-if="isShowValue" :name="column.type" :column="column" :row="row">
      {{ row[column.field] }}
    </slot>
    <table-operation :operations="operations" :column="column" :row="row" @handle-operation="handleOperation">
      <template v-slot:form="{ operation }">
        <form-index
          :ref="formRef"
          v-loading="false"
          label-width="0"
          :info="row"
          :form-id="formId"
          :inputs="inputs"
          :operation="operation"
          :column="column"
          size="mini"
          @input-change="handleInputChange"
          @submit="handleFormSubmit"
          @cancel="handleFormCancel"
        >
          <template v-slot:form-btn>
            <div />
          </template>
        </form-index>
      </template>
    </table-operation>
  </div>
</template>

<script>
import TableOperation from './table-operation'
import FormIndex from '@/views/complex/form'
export default {
  name: 'TableItem',
  components: { TableOperation, FormIndex },
  // eslint-disable-next-line vue/require-prop-types
  props: ['column', 'row', 'primaryKey', 'isAllowUpdate'],
  data() {
    return {
      // 显示在表格的操作
      tableOperations: ['edit', 'toggle', 'delete', 'editNew', 'routerPush', 'jump', 'ajax', 'form'],
      // 是否显示值 (如果operation中 有form或hideValue操作则不显示)
      isShowValue: true,
      columnStyle: {}
    }
  },
  computed: {
    operations() {
      // 筛选只在表格显示的操作
      return this.column.operations.filter(operation => {
        if (operation.action === 'form' || operation.action === 'hideValue') {
          this.isShowValue = false
        } else if (operation.action === 'listStyle') {
          this.columnStyle = operation.style
        }

        return this.tableOperations.indexOf(operation.action) > -1
      })
    },
    // [form-index] 表单ID
    formId() {
      return this.row[this.primaryKey]
    },
    // [form-index] 表单inputs
    inputs() {
      const column = {
        ...this.column,
        label: '',
        value: this.row[this.column.field],
        showStatus: 7
      }
      return [column]
    },
    formRef() {
      return 'form-' + this.column.field + this.formId
    }
  },
  methods: {
    // 触发父组件处理操作
    handleOperation({ operation, row, column }) {
      this.$emit('handle-operation', { operation, row, column })
    },
    // 当监听按钮发生改变 -> 触发提交
    handleInputChange(value, input) {
      if (this.isAllowUpdate) {
        console.log(value, input)
        console.log(this.$refs)
        this.$refs[this.formRef].onSubmit()
      }
    },
    handleFormSubmit(...params) {
      this.$emit('form-submit', ...params)
    },
    handleFormCancel(...params) {
      this.$emit('form-cancel', ...params)
    }
  }
}
</script>

<style scoped>
  ul,li {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  /deep/.app-container {
    padding: 0;
  }
  /deep/.li {
    padding: 0;
  }
  /deep/.li .el-form-item {
    margin-bottom: 0;
    max-width: 100%;
  }
  /deep/.li .el-input-number {
    max-width: 100%;
  }
  /deep/.li .el-input {
    max-width: 100%;
  }
  /deep/.li label.el-radio {
    display: block;
    margin-right: 0;
    margin-bottom: 4px;
  }
  /deep/.li .el-textarea__inner {
    height: 50px;
  }
</style>
<style>

</style>

